<template>
    <!----------  素材库（暂时只支持小程序）  ---------->
    <view class="">
        <view class="content">
            <view class="inputTab">
                <!-- #ifdef MP-WEIXIN -->
                <open-data class="head-img" type="userAvatarUrl"></open-data>
                <!-- #endif -->
                <view class="inputBox">
                    <input class="searchInput" placeholder="搜索" v-model="inputKeyword" />
                    <icon type="search" size="12" class="searchIcon"></icon>
                    <text class="searchBtn" @click="search">搜索</text>
                </view>
            </view>
            <view class="edit-btn" @click="add">
                <text class="iconfont icon-edit"></text>
                <text class="edit-text">发布</text>
            </view>
            <view class="page-section-spacing">
                <view class="scroll-view_H">
                    <view
                        class="scroll-view-item_H"
                        :class="selectedMenu == index ? 'active' : ''"
                        v-for="(item, index) in menu"
                        :key="index"
                        @click="changeMenu"
                        >{{ item.Name }}</view
                    >
                </view>
            </view>
            <view class="material-list">
                <view v-if="list.length > 0">
                    <view class="material-li" v-for="(item, index) in list" :key="item.ID" @click="gotoDetail">
                        <view class="item-head">
                            <image class="head-img" :src="item.HeadImage"></image>
                            <view class="head-info">
                                <view class="head-name">{{ item.NickName || item.RealName }}</view>
                                <view class="head-time">{{ item.AddTime }}</view>
                            </view>
                        </view>
                        <!--内容-->
                        <view class="" style="padding-top: 10rpx; display: block">
                            {{ item.Content }}
                        </view>
                        <!-- 图片 -->
                        <view class="imgBox" v-if="item.Images && item.Images.length > 0">
                            <view class="text-img" v-for="(img, ind) in item.Images" :key="ind">
                                <image mode="aspectFill" :src="img" @click="showImage"> </image>
                            </view>
                        </view>
                        <!-- 视频 -->
                        <view
                            class="videoBox"
                            :style="{ 'background-image': 'url(' + item.VideoImgSrc + ')' }"
                            v-if="item.VideoUrl">
                            <text class="play-btn" @click="gotoPlayer"></text>
                        </view>
                        <view class="btn-box">
                            <view @click="copyText" class="downloadBtn" v-if="item.Content">复制文案</view>
                            <view @click="saveImage" class="downloadBtn" v-if="item.Images && item.Images.length"
                                >下载图片</view
                            >
                            <view @click="saveVideo" class="downloadBtn" v-if="item.VideoUrl">下载视频</view>
                            <view open-type="share" @click="share" class="downloadBtn">立即分享</view>
                        </view>
                        <text class="" v-if="item.IsProduct">商品链接</text>
                        <view class="goods-list" v-if="item.IsProduct">
                            <view
                                class="goods-li"
                                v-for="(pro, ind) in item.ProductList"
                                :key="item.ID"
                                @click="gotoProduct">
                                <view class="goods-img">
                                    <image :src="pro.ShowImage"> </image>
                                </view>
                                <text class="goods-name">{{ pro.ProductName }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="list.length == 0 && nodatashow" class="nodata">
                    <text>暂无相关数据</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            inited: false,
            menu: [],
            list: [],
            selectedMenu: 0,
            query: {
                pageIndex: 1,
                pageSize: 10,
                type: 1,
                categoryId: "",
                userId: "",
                isFollow: "",
                keyword: "",
            },
            userId: 0,
            keyword: "",
            total_amount: 0,
            nodatashow: false,
        }
    },
    onLoad(e) {
        this.data = JSON.parse(decodeURIComponent(e.data))
    },
    mounted() {},
    methods: {
        getQrcode() {
            // this.qrcode = GetQrCode(this.data.CouponCode)
        },
    },
}
</script>

<style lang="scss" scoped>
.content {
    min-height: 100vh;
    height: auto;
    background: #f4f4f4;
}

.inputTab {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 30rpx;
}

.inputBox {
    flex: 1;
    position: relative;
}

.searchIcon {
    position: absolute;
    top: 22rpx;
    left: 30rpx;
}

.searchInput {
    flex: 1;
    font-size: 24rpx;
    line-height: 64rpx;
    height: 64rpx;
    padding: 0 120rpx 0 70rpx;
    border-radius: 32rpx;
    background: #f4f4f4;
}

.searchBtn {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 26rpx;
    display: block;
    height: 64rpx;
    line-height: 64rpx;
    border-radius: 0 32rpx 32rpx 0;
    padding: 0 40rpx 0 30rpx;
    background: #e7e7e8;
}

.addBtn {
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 40rpx;
    margin: 0 10rpx;
}

.scroll-view_H {
    background: #fff;
    width: 100%;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
}

.scroll-view-item_H {
    display: inline-block;
    margin: 0 30rpx;
    flex-shrink: 0;
    font-size: 32rpx;
    padding: 13rpx 15rpx 30rpx;
    color: #999;
}

.active {
    border-bottom: 2px solid #61bf4e;
    color: #333;
}

.material-list {
    margin: 20rpx;
}

.material-li {
    margin-top: 20rpx;
    background: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    overflow: hidden;
    position: relative;
}
.edit-btn {
    position: fixed;
    right: 0;
    top: 500rpx;
    z-index: 1000;
    background: #61bf4e;
    color: #fff;
    border-radius: 26rpx 0 0 26rpx;
}
.edit-btn .icon-edit {
    font-size: 36rpx;
    margin-left: 26rpx;
}
.edit-text {
    font-size: 28rpx;
    display: inline-block;
    line-height: 52rpx;
    padding: 0 30rpx 0 15rpx;
}
.item-head {
    display: flex;
    align-items: center;
}

.head-img {
    height: 68rpx;
    width: 68rpx;
    margin-right: 20rpx;
    overflow: hidden;
    border-radius: 50%;
}
.head-info {
    height: 68rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.head-name {
    font-size: 28rpx;
    line-height: 28rpx;
}
.head-time {
    font-size: 20rpx;
    line-height: 20rpx;
    color: #999;
}

.attBtn {
    position: absolute;
    font-size: 24rpx;
    line-height: 40rpx;
    height: 40rpx;
    background: #fff;
    border-color: currentColor !important;
    top: 25rpx;
    right: 20rpx;
}

.textCont {
    margin-top: 20rpx;
    font-size: 24rpx;
    line-height: 1.5;
}

.imgBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15rpx;
}

.text-img {
    display: inline-block;
    width: calc(33.33% - 5rpx);
    height: 0;
    padding-bottom: calc(33.33% - 5rpx);
    position: relative;
    margin-top: 5rpx;
    margin-right: 5rpx;
    overflow: hidden;
}

.text-img:nth-child(3n + 3) {
    margin-right: 0;
}

.text-img image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videoBox {
    position: relative;
    margin-top: 20rpx;
    width: 45%;
    padding-top: 65%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.2);
    vertical-align: middle;
}

.play-btn:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-width: 10px 0 10px 15px;
    border-style: solid;
    border-radius: 3px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
    content: "";
    -webkit-transform: translate(-40%, -50%);
    transform: translate(-40%, -50%);
}

.btn-box {
    margin-top: 20rpx;
    text-align: right;
}

.downloadBtn {
    display: inline-block;
    font-size: 28rpx;
    line-height: 60rpx;
    height: 60rpx;
    padding: 0 16rpx;
    background: #fff;
    border-color: currentColor !important;
    margin-left: 20rpx;
}
.btn-box .downloadBtn:first-child {
    margin-left: 0rpx;
}
.goods-list {
    overflow-x: auto;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    margin-top: 10rpx;
}

.goods-li {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    align-items: center;
    padding: 10rpx;
    background: #e5e5e5;
    margin-right: 20rpx;
}

.goods-img {
    height: 80rpx;
    width: 80rpx;
    margin-right: 10rpx;
}

.goods-img image {
    width: 100%;
    height: 100%;
}

.goods-name {
    font-size: 24rpx;
}

.comment-box {
    margin-top: 30rpx;
}

.comment-tle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comment-time {
    font-size: 24rpx;
    color: #999;
}

.comment-num {
    font-size: 26rpx;
    line-height: 36rpx;
    margin-left: 40rpx;
    padding-left: 40rpx;
    position: relative;
}

.comment-num::before {
    position: absolute;
    left: 0;
    top: -4rpx;
}

.comment-area {
    margin-top: 20rpx;
    font-size: 26rpx;
    position: relative;
    padding: 10rpx 17rpx;
    background: #e5e5e5;
}

.comment-area:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -10rpx;
    left: 30rpx;
    border-left: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
    border-bottom: 10rpx solid #e5e5e5;
}

.comment-li {
    margin-top: 10rpx;
}

.nodata {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 100rpx;
    color: #666;
}
</style>
